<template>
    <!--概览统计-->
    <el-row>
        <el-col :span="6">
            <!--
    value  数字内容
   -->
            <el-statistic :value="summaryData.goingActivityCount">
                <template #title>
                    <div style="display: inline-flex; align-items: center">
                        市场活动
                    </div>
                </template>
                <template #suffix> / {{ summaryData.totalActivityCount }}</template>
            </el-statistic>
        </el-col>

        <el-col :span="6">
            <!--
    title  数字标题
    value  数字内容
   -->
            <el-statistic title="线索总数" :value="summaryData.totalClueCount" />
        </el-col>

        <el-col :span="6">
            <el-statistic title="客户总数" :value="summaryData.totalCustomerCount" />
        </el-col>

        <el-col :span="6">
            <el-statistic :value="summaryData.successTranAmount">
                <template #title>
                    <div style="display: inline-flex; align-items: center">
                        交易总额
                    </div>
                </template>
                <template #suffix> / {{ summaryData.totalTranAmount }}</template>
            </el-statistic>
        </el-col>
    </el-row>


    <!-- 销售漏斗图 -->
    <div id="saleFunnelChart" style="width: 500px;height: 400px;"></div>

    <!--饼状图图-->
    <div id="cluePieChart" style="width: 500px;height: 400px;"> </div>
</template>

<script setup>
import { doGet } from '@/http/httpRequest'
import { showMessage } from '@/util/message'
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts'


let summaryData = ref({})

onMounted(() => {
    //加载概览统计数据
    loadSummaryData();
    loadSaleFunnelData()
    loadCluePieData()
})

const loadSummaryData = async () => {
    let resp = await doGet('/api/summary/data', {})
    if (resp.data.code == 200) {
        summaryData.value = resp.data.info;
    } else {
        showMessage('数据加载失败', 'error');
    }
}


//销售漏斗
const loadSaleFunnelData = async () => {
    let resp = await doGet('api/sale/funnel', {})

    if (resp.data.code == 200) {
        let funnelData = resp.data.info
        //获取div对象，将图片展示到这个div中
        let chartDom = document.getElementById('saleFunnelChart')
        //初始化
        let myChart = echarts.init(chartDom)


        let option = {
            title: {
                text: '销售漏斗图'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}%'
            },
            toolbox: {
                feature: {
                    dataView: { readOnly: false },
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                //data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
            },
            series: [
                {
                    name: '销售漏斗图',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    labelLine: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    data: funnelData
                }
            ]
        };

        // 使用配置项和数据显示图表
        myChart.setOption(option);
    } else {
        showMessage('数据加载失败', 'error');
    }
}
//饼状图线索来源
const loadCluePieData = async () => {
    let resp = await doGet('api/clue/pie', {})

    if (resp.data.code == 200) {
        let pieData = resp.data.info
        //获取div对象，将图片展示到这个div中
        let chartDom = document.getElementById('cluePieChart')
        //初始化
        let myChart = echarts.init(chartDom)


        let option = {
            title: {
                text: '线索来源',
                subtext: '线索来源',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '线索来源',
                    type: 'pie',
                    radius: '50%',
                    data: pieData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        option && myChart.setOption(option);
    }

    
}
</script>

<style scoped></style>